import React, { Component } from 'react';
import { View, Text, FlatList, ActivityIndicator } from 'react-native';
import * as api from '@/api'

class Phttp extends Component {
    constructor(props){
        super(props)
        this.state = {
            isLoading: true,
            dataSource: []
        }
    }

    init = () => {
        api.getData().then(resp => {
            this.setState({
                isLoading: false,
                dataSource: resp.data.movies
            })
        }).catch(err=>{
            console.error(err)
        })
    }

    componentDidMount(){
        this.init()
    }

    render(){
        const { isLoading, dataSource } = this.state

        if(isLoading){
            return(
              <View style={{flex: 1, padding: 200}}>
                <ActivityIndicator/>
              </View>
            )
        }
      
        return (
            <View style={{flex: 1, paddingTop:200}}>
                <FlatList
                data={dataSource}
                renderItem={({item}) => <Text>{item.title}, {item.releaseYear}</Text>}
                keyExtractor={(item, index) => item.id}
                />
            </View>
        )
    }
}

export default Phttp